import dayjs from 'dayjs'
import React from 'react'

interface IProps {
  _id: string
  cover: string
  title: string
  desc: string
  category: string
  createdAt: string
  author: string
}

import './article.scss'

const Article = (props: IProps) => {
  const { _id, title, category, desc, createdAt, author, cover } = props

  // useEffect(() => {
  // }, [])

  const fomatDate = (date: string) => {
    return dayjs(date).format('YYYY-MM-DD')
  }

  return (
    <article className="article">
      <a className="art-cover" href={`/detail/${_id}`}>
        <img src={cover} className="picture" />
      </a>
      <div className="art-info">
        <h2 className="title">
          <a href={`/detail/${_id}`}>{title}</a>
        </h2>
        <p className="desc">{desc}</p>
        <p className="extra">
          <span className="category">
            {' '}
            <i className="iconfont iconzhekou"></i>
            {category}
          </span>
          <span className="author">
            {' '}
            <i className="iconfont iconwode"></i>
            {author}
          </span>
          <span className="comm">
            {' '}
            <i className="iconfont iconspeechbubble"></i> {0}
          </span>
          <span className="watch">
            {' '}
            <i className="iconfont iconchakan"></i> {0}
          </span>
          <span className="date">
            {' '}
            <i className="iconfont iconshizhong"></i> {fomatDate(createdAt)}
          </span>
        </p>
      </div>
    </article>
  )
}

export default Article
